<template>
  <!-- 表单 -->

  <el-form :border="true" :inline="true" :model="list" class="demo-form-inline">
    <div class="container">
      <div class="left">
        <el-form-item
          v-for="(item, index) in list.modes"
          :key="index"
          :label="item.label"
        >
          <!-- inupt 输入 -->
          <template v-if="item.formType == 'input'">
            <el-input
              v-model="item.value"
              :placeholder="item.placeholder"
            ></el-input>
          </template>

          <!-- select 选择器 -->
          <template v-if="item.formType == 'select'">
            <el-select
              v-model="item.value"
              filterable
              :placeholder="item.placeholder"
              @change="changeValue"
            >
              <el-option
                v-for="(cItem, index) in item.select"
                :key="index"
                :label="cItem.label"
                :value="cItem.value"
              >
              </el-option>
            </el-select>
          </template>

          <!-- 时间点 -->
          <template v-if="item.formType == 'date'">
            <div>
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="item.value"
              ></el-date-picker>
            </div>
          </template>

          <!-- 时间段 -->
          <template v-if="item.formType == 'datePicker'">
            <el-date-picker
              v-model="item.value"
              :type="item.pickerType"
              :placeholder="item.placeholder"
              :range-separator="item.rangeSeparator"
              :start-placeholder="item.startPlaceholder"
              :end-placeholder="item.endPlaceholder"
              @change="changeValue"
            >
            </el-date-picker>
          </template>

          <!-- 没有输入类型 -->
          <template v-if="item.formType == undefined">
            <el-input
              v-model="value"
              :placeholder="item.placeholder"
            ></el-input>
          </template>
        </el-form-item>

        <div class="right">
          <el-button size="mini" @click="onSubmitFn" type="primary"
            >查询</el-button
          >
          <el-button size="mini" @click="resetFn">重设</el-button>
        </div>
      </div>
    </div>

    <!-- <el-form-item label="活动区域">
      <el-select v-model="formInline.region"
                 placeholder="活动区域">
        <el-option label="区域一"
                   value="shanghai"></el-option>
        <el-option label="区域二"
                   value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"
                 @click="onSubmit">查询</el-button>
    </el-form-item> -->
  </el-form>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
    },
    list: {
      type: Object,
    },
    modes: {},
  },

  data() {
    return {
      value: "",
      value1: "",
    };
  },

  methods: {
    //   所有的form的value传递给父组件
    onSubmitFn() {
      let arr = [];
      this.list.modes.forEach((item) => {
        arr.push({ [item.mode]: item.value });
      });
      this.$emit("EventOnsubmit", arr);
    },
    // 重设所有的form
    resetFn() {
      this.list.modes.forEach((item) => {
        item.value = "";
      });
    },
    // 选择改变时候
    changeValue(value) {
      console.log(value);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .container {
  .right {
    float: right;
    margin-right: 40px;
  }
}
::v-deep .el-form-item {
  width: 290px;
  margin-bottom: 10px !important;
}
::v-deep .el-form-item__label {
  width: 68px;
}
::v-deep .el-form-item__content {
  width: 210px;
}
</style>